<script setup lang="ts">
import { getQclLeftData } from '@/api/Quancheng';

// 声明emits以避免Vue 3警告
defineEmits(['postMessage']);

const userQclData = ref([]);
onMounted(async () => {
  try {
    const { data } = await getQclLeftData({ type: 'userQcl' });
    userQclData.value = data.userQcl;
  } catch (error) {
    console.error('获取燃气用户失败:', error);
  }
});
</script>

<template>
  <el-row :gutter="20" class="gasUsers-box">
    <el-col :span="12" v-for="(item, index) in userQclData" :key="index">
      <div class="gasUsers-item-box">
        <div class="gasUsers-item-icon-box">{{ item.total }}</div>
        <div class="gasUsers-item-text-box">{{ item.name }}</div>
      </div>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.gasUsers-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.gasUsers-item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;

  .gasUsers-item-icon-box {
    width: 5.625rem;
    height: 4.625rem;
    text-align: center;
    line-height: 4.625rem;
    background: url(@/assets/largescreen/gas-user-icon.png) no-repeat center center;
    background-size: 100% 100%;
    font-size: 1.25rem;
    font-family: YouSheYaHei;
    font-weight: 700;
    color: #0be4f1;
  }

  .gasUsers-item-text-box {
    margin-top: 0.1rem;
  }
}
</style>
